<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                template="./base.template.xhtml">

    <ui:define name="top">
    </ui:define>
    <ui:define name="page_title">   
        CATALOGO DE DEPARTAMENTOS
        <h:form id="_frmSearchDepartments">
            <div align="center">
                <h:panelGrid columns="4" cellpadding="5" width="70%" style="border-style: solid; border-width: thin; border-color: lightgray; margin-bottom: 1em;">
                    
                    <h:outputLabel for="_departmentCode" value="Codigo:" style="font-weight:bold"/>
                    <p:inputText id="_departmentCode" value="#{testBean.departmentCode}" />
                    
                    <h:outputLabel for="_departmentInitials" value="Iniciales:" style="font-weight:bold"/>
                    <p:inputText id="_departmentInitials" value="#{testBean.departmentInitials}" />
                    
                    <h:outputLabel for="_departmentName" value="Nombre:" style="font-weight:bold"/>
                    <p:inputText id="_departmentName" value="#{testBean.departmentName}" />
                    
                </h:panelGrid>
                <p:commandButton value="BUSCAR" update=":form:_departments"  
                                 action="#{testBean.findDepartments}" /> 
                <p:commandButton value="LIMPIAR" update=":form:_departments, _frmSearchDepartments"  
                                 action="#{testBean.reset}" />
                <p:commandButton value="AGREGAR" update=":form:display"
                                 action="#{testBean.addDepartment}"
                                 oncomplete="clearModal(); depDialog.show();" />
            </div>
        </h:form>
    </ui:define>
    <ui:define name="content">
        <h:form id="form">
            <p:growl id="msgs" showDetail="true" />
            <p:dataTable id="_departments" var="_vDepartment" value="#{testBean.departments}">

                <p:column headerText="CODIGO" style="width: 20%;">
                    <h:outputText value="#{_vDepartment.code}" />
                </p:column>
                
                <p:column headerText="INICIALES" style="width: 20%;">
                    <h:outputText value="#{_vDepartment.initials}" />
                </p:column>

                <p:column headerText="DESCRIPCION">
                    <h:outputText value="#{_vDepartment.description}" />
                </p:column>

                <p:column  style="width: 10%; text-align: center;" headerText="EDITAR">
                    <p:commandButton id="selectButton" update=":form:display"
                                     oncomplete="depDialog.show(); copyValues2Modal('${_vDepartment.code}', '${_vDepartment.initials}', '${_vDepartment.description}');"
                                     icon="ui-icon-search" title="Editar...">
                        <f:setPropertyActionListener value="#{_vDepartment}" target="#{testBean.selectedDepartment}" />
                    </p:commandButton>
                </p:column>
            </p:dataTable>

            <p:dialog header="Editar/Agregar Departamento" widgetVar="depDialog" resizable="false" id="depDlg"
                      showEffect="explode" hideEffect="explode" modal="true">

                <h:panelGrid id="display" columns="2" cellpadding="4" style="margin:0 auto;">
                    <f:facet name="header">
                        <p:graphicImage value="/img/ico_super.png"/>
                    </f:facet>

                    <h:outputText value="Codigo:" />
                    <h:inputText id="_modDepCode" value="#{testBean.departmentCode}" style="font-weight:bold"/>
                    
                    <h:outputText value="Iniciales:" />
                    <h:inputText id="_modDepInitials" value="#{testBean.departmentInitials}" style="font-weight:bold"/>

                    <h:outputText value="Description:" />
                    <h:inputText id="_modDepName" value="#{testBean.departmentName}" style="font-weight:bold; width:400px"/>

                </h:panelGrid>
                <h:panelGrid id="_modActionBtns" columns="3" cellppadding="4" style="margin:0 auto">
                    <p:commandButton value="GUARDAR" update=":form:_departments" id="ajax"  
                                     actionListener="#{testBean.save}" styleClass="ui-priority-primary"
                                     oncomplete="depDialog.hide()"/>  
                    <p:commandButton value="CANCELAR" styleClass="ui-priority-primary"
                                     oncomplete="depDialog.hide()"/>
                    <p:commandButton value="ELIMINAR" update=":form:_departments" id="ajaxDelete"  
                                     actionListener="#{testBean.save}" styleClass="ui-priority-primary"
                                     oncomplete="depDialog.hide()"/>
                </h:panelGrid>
            </p:dialog>
        </h:form>
        <script type="text/javascript">
            function copyValues2Modal(pDepCode, pDepInitials, pDepName){
                document.getElementById('form:_modDepCode').value = pDepCode;
                document.getElementById('form:_modDepInitials').value = pDepInitials;
                document.getElementById('form:_modDepName').value = pDepName;
            }
            function clearModal(){
                document.getElementById('form:_modDepCode').value = '';
                document.getElementById('form:_modDepInitials').value = '';
                document.getElementById('form:_modDepName').value = '';
            }
        </script>
    </ui:define>
    <ui:define name="bottom">
        bottom
    </ui:define>
</ui:composition>